<template>
  <el-dialog title="查看来源费率" :visible.sync="showVisible" :before-close="closeDialog" width="40%">
    <div v-for="item in rateData" :key="item.id">
      <h3 class="tableTitle">{{ item.source_name }}</h3>
      <el-table :data="[item]" border>
        <el-table-column label="合同费用">
          <template slot-scope="scope">
            <span>{{ scope.row.smartcontract }}元</span>
          </template>
        </el-table-column>
        <el-table-column label="实名认证">
          <template slot-scope="scope">
            <span>{{ scope.row.realname }}元</span>
          </template>
        </el-table-column>
        <el-table-column label="平台">
          <template slot-scope="scope">
            <span>{{ scope.row.platform }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="代扣">
          <template slot-scope="scope">
            <span>{{ scope.row.withhold }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="存证">
          <template slot-scope="scope">
            <span>{{ scope.row.file }}%</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showVisible: {
      type: Boolean,
      default: false
    },
    rateData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    closeDialog(param) {
      this.$emit('closeDialog', param)
    }
  }
}
</script>

<style lang="scss" scoped>
.tableTitle {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-align: center;
  line-height: 35px
}

/deep/.el-dialog__body {
  padding: 20px 80px;
}
</style>
